<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示老师</title>
<link rel="stylesheet" href="js/jquery-ui.css">
<style type="text/css">
	.contrainer {
		width:800px;
		margin:20px auto;
		
	}
	.contrainer h3 {
		text-align: center;
	}
	.contrainer table{
		width:100%;
		border-collapse: collapse;
	}
	td,th {
		padding: 8px 15px;
		text-align: center;
	}
	form p label {
	display: inline-block;
	width: 80px;
	text-align: right;
	margin-bottom: 10px;
	
	}
	form p input{
		padding: 5px;
		
	}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
function refreshTable(){
	$.post('tea',{method:'allTea'},function(data){
		var tbody = $('#tbody');
		tbody.empty();
		for(var i=0;i<data.length;i++){
			var bj = data[i];
			console.log(bj);
			var tr=$('<tr/>');
			tr.append($('<td/>').html(bj.id));
			tr.append($('<td/>').html(bj.username));
			tr.append($('<td/>').html(bj.name));
			tr.append($('<td/>').html(bj.username));
			tr.append($('<td/>').html('<a href="javascript:xg('+bj.id+')">修改</a>'));
			tr.append($('<td/>').html('<a href="javascript:del('+bj.id+')">删除</a>'));
			tbody.append(tr);
		}
	});
}


function xg(id) {
	var dialog=$('#dialog');
	dialog.load('tea',{method:'ajaxEdit',id:id},function(){
		dialog.dialog('open');
	});
}
function del(id) {
	if(confirm("是否要删除这条记录？(删除后无法恢复)")){
		window.location="tea?method=delete&id="+id;
	}
}
$(function() {
	refreshTable();
	$('#dialog').dialog({
		autoOpen:false,
		title:'编辑',
		modal:true,
		width:400,
		buttons:{
			'保存':function(){
				var form=$(this).find('form');
				var params=form.serialize();
				$.post('tea?method=ajaxSave',params,function(data){
					refreshTable();
				});
				$(this).dialog('close');
			},
			'退出':function(){
				$('#dialog').dialog('close');
			}
		}
	});
});



</script>
</head>
<body background="images/1.jpg">
   <div class="contrainer">
	<h3>显示老师</h3>
	<button type="button" onclick="add()">新增</button>
	<table border="1">
		<thead>
			<tr>
				<th>序号</th>
				<th>用户名</th>
				<th>姓名</th>
				<th>密码</th>
				<th colspan="2">操作</th>
			</tr>
		</thead>
		<tbody id="tbody">
		
		</tbody>
	</table>
</div>
</body>
</html>